<template>
<div>
  <el-container class="tag_container">
     <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="star"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >  </vue-particles>
    <div class="header">
      <el-card class="tag_header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/tag' }">标签</el-breadcrumb-item>
          <el-breadcrumb-item>{{tagHeader}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="myTag">
          <div v-for="(item,key) in tagList" :key="key">
            <el-tag :type="tagType[key%5]" @click="getBlogsByTagId(item.id, item.tag)" style="margin-right: 20px; margin-bottom: 10px; position: relative;">
              {{item.tag}}
            </el-tag>
          </div>
        </div>
      </el-card>
      <h3 style="text-align: center" v-show="!hasBlogs">该标签下暂无博客</h3>
      <W-TagBlogList class="blog-list" :Blogs="Blogs" v-show="hasBlogs"></W-TagBlogList>
      <div class="tag_page">
          <el-pagination
          v-show="hasBlogs"
            @current-change="handleCurrentChange"
            :background="true"
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            style="position: relative;">
          </el-pagination>
      </div>
    </div>
    <div class="left">
      <W-TagLeft></W-TagLeft>
    </div>
  </el-container>
</div>
</template>

<script>
import TagLeft from '../components/section/TagLeft'
import TagBlogList from '../components/section/TagBlogList'
export default {
  data () {
    return {
      Blogs: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tagList: [],
      tagType: ['', 'success', 'info', 'warning', 'danger'],
      tagHeader: '',
      tag_id: Number,
      hasBlogs: false
    }
  },
  metaInfo: {
    title: 'lazyzw博客标签页', // set a title
    meta: [{
      name: 'keywords',
      content: 'lazyzw,Java,Redis,IT,网络,操作系统,leetcode,个人网站,博客网站'
    },
    {
      name: 'description',
      content: 'lazyzw个人博客网站,热爱编程的学习者,Java后端技术分享,算法知识分享'
    }]
  },
  components: {
    'W-TagLeft': TagLeft,
    'W-TagBlogList': TagBlogList
  },
  methods: {
    handleCurrentChange (val) {
      this.$axios.get('/blog/getBlogsByTagId', {
        params: {
          current: 1,
          size: val,
          tag_id: this.tag_id
        }
      }).then(response => {
        // console.log(response.data)
        this.$set(this, 'Blogs', response.data.data)
        this.convertBlog(this.Blogs)
        if (this.Blogs !== null) {
          this.currentPage = Number(response.data.data[0].current)
          this.total = Number(response.data.data[0].total)
          this.pageSize = Number(response.data.data[0].size)
        } else {
          this.currentPage = 0
          this.total = 0
          this.pageSize = 0
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getAllTags () {
      this.$axios.get('/type/getAllTags').then(response => {
        this.$set(this, 'tagList', response.data.data)
        this.tagHeader = this.tagList[0].tag
        this.getBlogsByTagId(this.tagList[0].id, this.tagList[0].tag)
      }).catch(error => {
        console.log(error)
      })
    },
    getBlogsByTagId (id, tag) {
      this.tagHeader = tag
      this.tag_id = id
      this.$axios.get('/blog/getBlogsByTagId', {
        params: {
          current: 1,
          size: 20,
          tag_id: id
        }
      }).then(response => {
        this.$set(this, 'Blogs', response.data.data)
        this.convertBlog(this.Blogs)
        // console.log(this.Blogs)
        if (this.Blogs !== null) {
          this.currentPage = Number(response.data.data[0].current)
          this.total = Number(response.data.data[0].total)
          this.pageSize = Number(response.data.data[0].size)
          this.hasBlogs = true
        } else {
          this.hasBlogs = false
          this.currentPage = 0
          this.total = 0
          this.pageSize = 0
        }
      }).catch(error => {
        console.log(error)
      })
    },
    convertBlog (blogList) {
      var i = 0
      for (; i < blogList.length; i++) {
        blogList[i].tagNames = blogList[i].tagNames.replace('[', '')
        blogList[i].tagNames = blogList[i].tagNames.replace(']', '')
        var d = new Date(blogList[i].create_time)
        blogList[i].create_time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() +
             ':' + d.getMinutes() + ':' + d.getSeconds()
        blogList[i].tagNames = blogList[i].tagNames.split(',')
      }
    }
  },
  mounted () {
    this.getAllTags()
  }
}
</script>

<style lang="less" scoped>
.tag_container{
  margin-top: 30px;
}
.tag_header{
  width: 100%;
  margin-left: 12%;
  margin-bottom: 30px;
}
.header{
  width: 63%;
  margin-right: 200px;
}
.tag_page{
  text-align: center;
}
.myTag{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.blog-list{
  margin-left: -4.5%;
  margin-right: 4.5%;
}
.left{
  margin-left: -3%;
}
#particles-js{
width: 97%;
   height: 82%;  
position:fixed;
position: absolute;
 }
</style>
